<!-- @format -->
<script setup>
	import { reactive, ref } from 'vue'

	import { ElMessage } from 'element-plus'

	// 登录表单
	const loginForm = reactive({
		username: '', // 用户名
		password: '' // 密码
	})

	const formRef = ref(null)

	// 校验规则
	const loginFormRules = {
		// 用户名
		username: [
			{
				required: true,
				message: '用户名不能为空',
				trigger: 'blur'
			},
			{
				min: 3,
				max: 6,
				message: '用户名长度在3-6之间',
				trigger: 'blur'
			}
		],
		// 密码
		password: [
			{
				required: true,
				message: '密码不能为空',
				trigger: 'blur'
			},
			{
				min: 6,
				max: 15,
				message: '密码长度在6-15之间',
				trigger: 'blur'
			}
		]
	}

	// 登录
	const onLogin = () => {
		// 整体校验
		formRef.value.validate((valid) => {
			// 如果没通过校验，给出错题提示并提前结束代码的执行
			if (!valid) return ElMessage.error('用户名或密码不对')
			console.log('ok')
			// ...
		})
	}

	// 取消
	const onCancel = () => {
		// 进行表单重置
		formRef.value.resetFields()
	}
</script>

<template>
	<!-- 登录外层盒子 -->
	<div class="login-box">
		<!-- 表单组件 -->
		<el-form
			ref="formRef"
			:model="loginForm"
			:rules="loginFormRules">
			<el-form-item prop="username">
				<!-- 
          prefix-icon: 在输入框的前面插入字体图标
        -->
				<el-input
					v-model="loginForm.username"
					placeholder="请填写用户名"
					prefix-icon="User" />
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					v-model="loginForm.password"
					placeholder="请填写密码"
					prefix-icon="Lock"
					type="password"
					show-password />
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					@click="onLogin"
					>登 录</el-button
				>
				<el-button @click="onCancel">取 消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<style lang="scss">
	// 注意：如果样式添加了 lang="scss" 报错了，需要安装 sass 模块
	// npm i sass -D
	* {
		margin: 0;
	}
	body {
		background: #ddd;
	}

	.login-box {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh; // 100vh: 视口/可视区的高度
		.el-form {
			width: 500px;
			padding: 40px 50px;
			background: #fff;
			.el-form-item {
				margin: 20px 0;
			}
			.el-input {
				height: 40px;
			}
		}
	}
</style>
